import { Drawer, Icon } from 'antd';
import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import config from '../../config';
import mainStyles from './main.less';

const header = props => {
  const { form, dispatch, data } = props;
  const [logoName, setLogoName] = useState("LOGO")
  const [headerBGA, setHeaderBGA] = useState("#FDFDFE")
  const [visible, setVisible] = useState(false)
  const showDrawer = () => {
    setVisible(true)
  };
  const onClose = () => {
    setVisible(false)
  };
  const logo = props?.setTing?.appLogo && JSON.parse(props?.setTing?.appLogo)
  return (
    <header>
      <div className={mainStyles.header_container} style={props?.setTing?.tabColor && { backgroundColor: props?.setTing?.tabColor }}>
        <div className={mainStyles.nav_box}>
          <div className={mainStyles.nav_left}>
            {/* <a id="logo_top" href="#"></a>*/}
            <span className={mainStyles.logoName}>
              {/* {logoName} */}
              <img src={config.targetUrl + logo?.[0]?.url} width={100} />
            </span>
          </div>
          <div className={mainStyles.nav_mid}>
            <ul className={mainStyles.navbar_nav}>
              {props.tabList.map((item) => {
                return (
                  <li style={{ backgroundColor: item.selfBGA, cursor: 'pointer' }} className={mainStyles.tabItem} onClick={() => {
                    props.history.push(item.jumpLink, item.id)
                  }}><span style={{ fontWeight: props.location?.pathname == item.jumpLink ? 900 : "normal", color: props.location?.pathname == item.jumpLink ? "#0d0c0c" : "#8189a8" }}>{item.name}</span></li>
                )
              })}
            </ul>
          </div>
          <div className={mainStyles.mobile_menu}>
            <Icon className={mainStyles.menuIcon} type="menu" onClick={() => { showDrawer() }} />
            <Drawer
              title={
                <div style={{
                  width: "100%", display: "flex",
                  justifyContent: "end",
                  fontSize: 21,
                }}>
                  <Icon type="close" onClick={() => { onClose() }} />
                </div>
              }
              placement="right"
              closable={false}
              onClose={() => { }}
              visible={visible}
              width="160"
              drawerStyle={{
                width: "160px",
              }}
              bodyStyle={{
                height: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "flex-start",
                alignItems: "center"
              }}
            >
              {props.tabList.map((item) => {
                return (
                  // <li><a href="product-4.html">高端金融咨询</a></li>
                  <div style={{ backgroundColor: item.selfBGA, padding: "10px 0" }} className={mainStyles.tabItem} onClick={() => {
                    props.history.push(item.jumpLink, item.param)
                  }}><span style={{ fontWeight: props.location?.pathname == item.jumpLink ? 900 : "normal" }}>{item.name}</span></div>
                )
              })}
            </Drawer>
          </div>
        </div>
      </div>
    </header >
  );
};

export default connect(({ Public }) => ({
  setTing: Public.setTing,
  tabList: Public.tabList
}))(header);
